<template>
  <div class="loginVideo">
    <div class="loginBox">
      <!-- 重置密码页面 -->
      <div class="container">
        <div class="drop">
          <div class="content">
            <h2 :style="{ color: 'black' }">重置密码页面</h2>
            <form>
              <div class="inputBox">
                <label for="username">邮箱</label>
                <input id="username" type="text" placeholder="邮箱" />
              </div>
              <div class="inputBox">
                <label for="newpassword">新密码</label>
                <input id="password" type="password" placeholder="新密码" />
              </div>
              <div class="inputBox">
                <label for="newpassword"> 核验</label>
                <input id="password" type="password" placeholder="确认密码" />
              </div>

              <!-- 两个按钮同行 -->
              <div class="buttons-container">
                <button class="reset-btn" @click="degnlu">重置密码</button>
                <button class="back-btn" @click="goBackToLogin">返回登录</button>
              </div>

            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
let yanma = ref("");
// 绑定验证码
let yantext = ref("");
// 验证码图形生成
var show_num = [];
onMounted(() => {
  draw();
});
// 登录
function degnlu() {
  // 先验证用户输入的验证码
  router.push("/home");
  console.log(yanma.value);
  if (yantext.value === yanma.value) {
    console.log("验证成功");
  } else {
    console.log("验证失败");
    draw();
    yantext.value = "";
  }
}

// Back to Login page function
function goBackToLogin() {
  router.push("/login"); // Navigate to the login page
}

function draw() {
  var canvas_width = document.getElementById("canvas").clientWidth;
  var canvas_height = document.getElementById("canvas").clientHeight;
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  var sCode =
      "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
  var aCode = sCode.split(",");
  var aLength = aCode.length;
  for (var i = 0; i <= 3; i++) {
    var j = Math.floor(Math.random() * aLength);
    var deg = (Math.random() * 30 * Math.PI) / 180;
    var txt = aCode[j];
    show_num[i] = txt;
    var x = 10 + i * 20;
    var y = 20 + Math.random() * 8;
    context.font = "23px 微软雅黑";
    context.translate(x, y);
    context.rotate(deg);
    context.fillStyle = randomColor();
    context.fillText(txt, 0, 0);
    context.rotate(-deg);
    context.translate(-x, -y);
  }
  for (var i = 0; i <= 5; i++) {
    context.strokeStyle = randomColor();
    context.beginPath();
    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
    context.closePath();
    context.stroke();
  }
  for (var i = 0; i <= 30; i++) {
    context.strokeStyle = randomColor();
    context.beginPath();
    var x = Math.random() * canvas_width;
    var y = Math.random() * canvas_height;
    context.arc(x, y, 1, 0, 2 * Math.PI);
    context.closePath();
    context.stroke();
  }
  function randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return `rgb(${r},${g},${b})`;
  }
  yanma.value = show_num.join("");
  return show_num;
}
</script>
<style scoped>
/* Existing styles... */

/* Buttons container for horizontal alignment */
.buttons-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  margin-top: 20px;
}

.reset-btn {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #3399ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 48%;
}

.reset-btn:hover {
  background-color: #287bcb;
}

.back-btn {
  padding: 10px 20px;
  font-size: 1em;
  background-color: red;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 48%;
}

.back-btn:hover {
  background-color: #d9534f;
}

.loginVideo {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: url('/login.png') no-repeat center center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 验证码样式 */
.canvascs {
  width: 92px;
  height: 30px;
  border-radius: 5px;
  margin-top: 2px;
  background: white;
  margin-left: 5px;
}

#yanzheng {
  display: flex;
  width: 130px;
}

#yanzheng div {
  width: 96px;
}

#yanzheng input {
  width: 100px;
}

.loginBox {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 登录框 */
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .drop {
  position: relative;
  width: 600px;
  height: 600px;
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
  25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
  inset -20px -20px 25px rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.container .drop:hover {
  border-radius: 10%;
}

.container .drop::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 85px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.container .drop::after {
  content: "";
  position: absolute;
  top: 90px;
  left: 110px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.container .drop .content {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 40px;
  gap: 15px;
}

.container .drop .content h2 {
  position: relative;
  color: #333;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.container .drop .content form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.container .drop .content form .inputBox {
  display: flex;
  align-items: center;
  position: relative;
  width: 225px;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
  inset -2px -5px 10px rgba(255, 255, 255, 1),
  15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
  border-radius: 25px;
  flex-direction: row; /* Aligns the label and input on the same line */
}

.container .drop .content form .inputBox label {
  margin-right: 10px;
  font-size: 1em;
  color: #333;
  white-space: nowrap; /* Prevents label text from wrapping */
}

.container .drop .content form .inputBox input,
.container .drop .content form .inputBox select {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 1em;
  padding: 10px 15px;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
  inset -2px -5px 10px rgba(255, 255, 255, 1),
  15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
  border-radius: 25px;
}

.container .drop .content form .inputBox input[type="button"] {
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.container .drop .content form .inputBox:last-child {
  width: 120px;
  background: #3399ff;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
  15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
  transition: 0.5s;
}

.container .drop .content form .inputBox:last-child:hover {
  width: 150px;
}
</style>
